<template>
    <div class="gradeList">
        <div class="header">
            <el-button type="primary" @click="handleAdd">添加同步课</el-button>
            <!-- <el-dialog :title="gosemester?'学期信息':'同步课信息'" :visible.sync="dialogAddVisible"> -->
            <el-dialog title="同步课信息" :visible.sync="dialogAddVisible">
                <div class="dialogAdd">
                    <FormAdd :currentPage="currentPage" :pageSize="pageSize" btnMsg="添加同步课" @success="doNext"
                        :gradeList="gradeList" :courseList="courseList" :semesterList="semesterList" @showcount="show"
                    ></FormAdd>
                </div>
            </el-dialog>
            <el-input placeholder="输入关键字搜索" v-model="search" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="findCourseSync"></el-button>
            </el-input>
        </div>
        <el-table :data="courseSyncList" height="520" style="justify-content: center;padding: 20px;" :default-sort = "{prop: 'academicYear', order: 'descending'}">
            <el-table-column prop="courseExtendName" label="同步课" width="360" show-overflow-tooltip sortable>
            </el-table-column>
            <el-table-column prop="courseExtendDesc" label="简介" width="280" show-overflow-tooltip sortable>
            </el-table-column>
            <el-table-column prop="courseId" label="课程" width="100" show-overflow-tooltip sortable>
            </el-table-column>
            <el-table-column prop="gradeId" label="年级" width="100" show-overflow-tooltip sortable>
            </el-table-column>
            <el-table-column prop="academicYear" label="年份" width="100" show-overflow-tooltip sortable>
            </el-table-column>
            <el-table-column prop="semesterId" label="学期" width="190" show-overflow-tooltip sortable>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <div style="display: flex;flex-direction: row;">
                        <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <div class="pages">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>
  
<script>
import FormAdd from '../FormAdd.vue';

export default {
    name: 'GradePage',
    components: {
        FormAdd,
    },
    data() {
        return {
            msg: '同步课管理',
            courseSyncList: [],
            schoolId: JSON.parse(sessionStorage.getItem('info')).schoolId,
            // 分页
            currentPage: 1,
            pageSize: 10,
            total: 0,
            // 搜索
            search: '',
            // 编辑
            editInfo: {},
            schoolList: [],
            dialogFormVisible: false,
            dialogAddVisible: false,
            formLabelWidth: '120px',
            rules: {
                courseExtendName: [
                    { required: true, message: '同步课名称不能为空', trigger: 'change' }
                ],
                courseExtendDesc: [
                    { required: true, message: '同步课简介', trigger: 'change' }
                ],
                gradeId: [
                    { required: true, message: '年级不能为空', trigger: 'change' }
                ],
                schoolId: [
                    { required: true, message: '学校不能为空', trigger: 'change' }
                ],
                semesterId: [
                    { required: true, message: '学期不能为空', trigger: 'change' }
                ],
            },
            courseList: [],
            gradeList: [],
            semesterList: [],
            options: [{
            value: '选项1',
            label: '同步课名称'
            }, {
            value: '选项2',
            label: '同步课简介'
            }, {
            value: '选项3',
            label: '课程'
            }, {
            value: '选项4',
            label: '年级'
            }, {
            value: '选项5',
            label: '年份'
            }],
            limit: '',
            gosemester: false,
            tempList: []
        }
    },
    methods: {
        // 编辑
        async handleEdit(index, row) {
            this.editInfo = { ...row };
            this.dialogFormVisible = true;
            // let res = await this.$axios.post(`http://39.105.215.62:8200/coursesync/updateCourseSync`, {})
        },
        // 
        changeInfo(form) {
            this.$refs[form].validate((valid) => {//表单校验
                if (valid) {//valid表示验证是否通过，返回值为布尔类型
                    this.dialogFormVisible = false;
                    this.$axios.post('http://39.105.215.62:8200/coursesync/updateCourseSync', this.editInfo)
                        .then(async (res) => {
                            console.log(res);
                            if (res.code == 200) {
                                await this.getList();
                                this.$message({
                                    message: res.msg,
                                    type: 'success'
                                });
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                } else {
                    console.log('表格不能为空!!');
                    return false;
                }
            });
        },
        handleDelete(index, row) {
            console.log(index, row.userId);
            // 提示信息
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            })
                .then(async () => {
                    let res = await this.$axios.post(`http://39.105.215.62:8200/coursesync/deleteCourseSync?id=${row.id}`);
                    console.log(res);
                    if (res.code == 200) {
                        await this.getList();
                        this.$message({
                            type: 'success',
                            message: res.msg
                        });
                        if (this.courseSyncList.length == 0 && this.currentPage > 1) {
                            this.currentPage = this.currentPage - 1;
                            await this.getList();
                        }
                    }
                })
        },
        show(count){
            this.gosemester = count
        },
        async handleAdd() {
            await this.searchGrade()
            await this.searchCourse()
            await this.searchSemester()
            this.dialogAddVisible = true;
        },
        doNext(msg) {
            if (msg) {
                this.dialogAddVisible = false;
                this.getList();
            }
        },
        async getList() {
            let res = await this.$axios.post(`http://39.105.215.62:8200/coursesync/findCourseSyncs?pageSize=${this.pageSize}&pageNum=${this.currentPage}`, { schoolId: this.schoolId })
            this.tempList = res.data.records
            for(let i=0; i<this.tempList.length; i++){
                for(let j=0; j<this.semesterList.length; j++){
                    if(this.tempList[i].semesterId == this.semesterList[j].id){
                        this.tempList[i].semesterId = this.semesterList[j].semester
                    }
                }
            }
            this.courseSyncList = this.tempList
            this.total = res.data.total
        },
        async handleSizeChange(val) {
            this.pageSize = val
            this.currentPage = 1
            this.getList();
        },
        async handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            console.log(val);
            await this.getList();
        },
        async findCourseSync() {
            if (this.search == '') {
                await this.getList();
                this.$message.error('请输入关键字进行查找!')
            }
            let res = await this.$axios.post(`http://39.105.215.62:8200/coursesync/findCourseSyncs?pageNum=${this.currentPage}&pageSize=${this.pageSize}`, { schoolId: this.schoolId, courseExtendName: this.search });
            this.courseSyncList = res.data.records;
            this.total = res.data.total;
            this.search = '';
        },
        async searchGrade(){
            let res = await this.$axios.post(`http://39.105.215.62:8200/grade/findGrades?pageNum=${this.currentPage}&pageSize=${this.pageSize}`, { schoolId: this.schoolId })
            this.gradeList = res.data.records
        },
        async searchCourse(){
            let res = await this.$axios.post(`http://39.105.215.62:8200/course/selectCourses?pageNum=${this.currentPage}&pageSize=${this.pageSize}`, { schoolId: this.schoolId, courseId: 0 });
            this.courseList = res.data.records
        },
        async searchSemester(){
            let res = await this.$axios.post(`http://39.105.215.62:8200/semester/searchSemester?pageNum=${this.currentPage}&pageSize=1000&schoolId=${this.schoolId}`);
            this.semesterList = res.data.records.sort((x,y)=> y.academicYear-x.academicYear);
        }
    },
    // 生命周期函数--钩子函数一般在初始化页面完成后，再对DOM节点进行相关操作
    async mounted() {
        this.$emit("transfer", this.msg);
        await this.searchSemester()
        await this.getList()
    }
}
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding: 5px;
}

.input-with-select {
    width: 400px;
}

.dialogAdd {
    display: flex;
    justify-content: center;
    align-items: center;
}
.input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

.pages {
    margin: 20px auto;
}
.input-limit {
    width: 200px;
    padding: 10px;
}
</style>
  